<template>
    <div class="table">
        <div class="container">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelectTab">
                <el-menu-item index="1">行业标签</el-menu-item>
                <el-menu-item index="2">职位标签</el-menu-item>
                <el-menu-item index="3">身份标签</el-menu-item>
                <el-button @click="eidtform.show = true" class="addButton">新建</el-button>
            </el-menu>
            <el-table :data="data" border class="table" ref="multipleTable">
                <el-table-column prop="name" label="标签名" width="1390" align="center">
                </el-table-column>
                <el-table-column label="编辑" width="180" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="100">
                </el-pagination>
            </div>
        </div>
        <!-- 新增 编辑弹出框 -->
        <fromTypeDialog ref="fromData" @on-input="clickUpData" :value="eidtform" :columns="eidtColumns"></fromTypeDialog>
        <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">是否确定删除此条记录?</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import fromTypeDialog from '../../../encapsulation/from-type-dialog';
import { list } from '@/service/serviceLcm';
export default {
    name: 'labelManage',
    components: {
        fromTypeDialog
    },
    data() {
        return {
            url: '../../../../../static/vuetable.json',
            tableData: [],
            cur_page: 1,
            multipleSelection: [],
            select_cate: '',
            select_word: '',
            del_list: [],
            is_search: false,
            editVisible: false,
            delVisible: false,
            form: {
                name: '',
                textarea: '',
                user: '',
                project: ''
            },
            // 新增编辑的弹框
            eidtform: {
                lableName: '',
                show: false,
                title: '新建观点'
            },
            eidtColumns: [{
                title: '标签名',
                key: 'lableName',
                type: 'text',
                required: true,
            }],
            idx: -1,
            addorEdit: '', //新增或编辑
            activeIndex: '1', //tab默认
        }
    },
    created() {
        this.getData();
    },
    computed: {
        data() {
            return this.tableData.filter((d) => {
                let is_del = false;
                for (let i = 0; i < this.del_list.length; i++) {
                    if (d.name === this.del_list[i].name) {
                        is_del = true;
                        break;
                    }
                }
                if (!is_del) {
                    if (d.address.indexOf(this.select_cate) > -1 &&
                        (d.name.indexOf(this.select_word) > -1 ||
                            d.address.indexOf(this.select_word) > -1)
                    ) {
                        return d;
                    }
                }
            })
        }
    },
    methods: {
        // 分页导航
        handleCurrentChange(val) {
            this.cur_page = val;
            this.getData();
        },
        // 获取 easy-mock 的模拟数据
        getData() {
            // this.$axios.get(this.url, {
            //     page: this.cur_page
            // }).then((res) => {
            //     this.tableData = res.data.list;
            // })
            list(this.cur_page).then(data => {
                this.tableData = data.list;
            })
        },
        search() { //搜索
            this.is_search = true;
        },
        formatter(row, column) {
            return row.address;
        },
        clickUpData(data) {
            console.log(data)
        },
        handleDelete(index, row) { //删除
            console.log(row)
            this.idx = index;
            this.delVisible = true;
        },
        // 确定删除
        deleteRow() {
            this.tableData.splice(this.idx, 1);
            this.$message.success('删除成功');
            this.delVisible = false;
        },
        handleSelectTab(index) { //选中index
            //console.log(index) 1 2
            this.activeIndex = index;
        },
    }
}

</script>
<style scoped>
.handle-box {
    margin-top: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.del-dialog-cnt {
    font-size: 16px;
    text-align: center
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.addButton {
    float: right;
    margin-top: 15px;
}

.handleMore {
    float: right;
}

</style>
